<!--
 * @Descripttion: 
 * @version: 
 * @Author: 
 * @Date: 2022-04-24 08:59:45
 * @LastEditors: weidelong
 * @LastEditTime: 2022-04-24 15:22:49
-->
<template>
    <van-tabbar v-model="active" @change="onChange" active-color="#1365b7" inactive-color="#404143" route>
        <van-tabbar-item icon="home-o" to="/home">
            <span>首页</span>
            <template #icon="props">
                <van-icon :name="props.active ? icon1.active : icon1.inactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item icon="like-o" to="/consult">
            <span>咨询</span>
            <template #icon="props">
                <van-icon :name="props.active ? icon3.active : icon3.inactive" />
            </template>
        </van-tabbar-item>
		<van-tabbar-item icon="friends-o"  to="/social" url="">
            <span>社区</span>
            <template #icon="props">
                <van-icon :name="props.active ? icon2.active : icon2.inactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item icon="user-o" to="/mine">
            <span>我的</span>
            <template #icon="props">
                <van-icon :name="props.active ? icon4.active : icon4.inactive" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
    <!-- <van-action-sheet
        v-model:show="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancel"
        @select="onSelected"
    /> -->
	
</template>

<script>
name: "bottom";
export default {
    data() {
        return {
            active: 0,
            icon1: {
                active: 'wap-home',
                inactive: 'wap-home-o',
            },
            icon2: {
                active: 'friends',
                inactive: 'friends-o',
            },
            icon3: {
                active: 'like',
                inactive: 'like-o',
            },
            icon4: {
                active: 'manager',
                inactive: 'manager-o',
            },
            show: '',
            actions: ''
        };
    },
    methods: {
        onCancel() {},
        onSelected() {},
        onChange(){}
    }
};
</script>

<style lang="scss" scoped>
</style>